<template>
  <div class="monitor_index flex_between_aligncenter">
    <BorderBox
      :title="title"
      :headerBottom="false"
      :wrapperStyle="{
        width: 'calc((100% - 32px) / 3)',
        height: '212px',
        marginBottom: '16px',
      }"
    >
      <template #main_info>
        <Charts id="12321" :options="lineOption" width="100%" height="170px" />
      </template>
    </BorderBox>
    <BorderBox
      :title="title"
      :headerBottom="false"
      :wrapperStyle="{
        width: 'calc((100% - 32px) / 3)',
        height: '212px',
        marginBottom: '16px',
      }"
    >
      <template #main_info>
        <Charts id="12321" :options="lineOption" width="100%" height="170px" />
      </template>
    </BorderBox>
    <BorderBox
      :title="title"
      :headerBottom="false"
      :wrapperStyle="{
        width: 'calc((100% - 32px) / 3)',
        height: '212px',
        marginBottom: '16px',
      }"
    >
      <template #main_info>
        <Charts id="12321" :options="lineOption" width="100%" height="170px" />
      </template>
    </BorderBox>
    <BorderBox
      :title="title"
      :headerBottom="false"
      :wrapperStyle="{
        width: 'calc((100% - 32px) / 3)',
        height: '212px',
      }"
    >
      <template #main_info>
        <Charts id="12321" :options="lineOption" width="100%" height="170px" />
      </template>
    </BorderBox>
    <BorderBox
      :title="title"
      :headerBottom="false"
      :wrapperStyle="{
        width: 'calc((100% - 32px) / 3)',
        height: '212px',
      }"
    >
      <template #main_info>
        <Charts id="12321" :options="lineOption" width="100%" height="170px" />
      </template>
    </BorderBox>
    <BorderBox
      :title="title"
      :headerBottom="false"
      :wrapperStyle="{
        width: 'calc((100% - 32px) / 3)',
        height: '212px',
      }"
    >
      <template #main_info>
        <Charts id="12321" :options="lineOption" width="100%" height="170px" />
      </template>
    </BorderBox>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Charts from "@/components/Charts/index.vue";
import { lineEcharts } from "@/hooks/echarts-config.js";
const props = defineProps({
  // 标题
  title: {
    type: String,
    default: "节点CPU使用率123",
  },
});
const xAxis = ref(["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Fri", "Sat", "Sun"]);
const chartsData = ref([820, 932, 901, 934, 1290, 1330, 1320, 934, 1290, 1330]);
const lineOption = ref(lineEcharts(xAxis.value, chartsData.value));
</script>

<style lang="scss" scoped>
.monitor_index {
  flex-wrap: wrap;
  width: 100%;
  padding: 0 16px;
}
</style>
